<template>
  <el-form action="" class="top-bar">
    <el-button type="primary">保存</el-button>
    <el-button icon="RefreshLeft">撤销</el-button>
    <el-button icon="RefreshRight">重做</el-button>
    <el-button @click="handleDarkMode">
      {{ parentData.dark ? "明亮模式" : "暗黑模式" }}
    </el-button>
    <el-button @click="resetTransform">还原</el-button>
  </el-form>
</template>
<script setup>
const emits = defineEmits(["reset"]);

import { inject } from "vue";
const parentData = inject("parentData");

// 改变主题
const handleDarkMode = () => {
  parentData.dark = !parentData.dark;
};
// 重置
const resetTransform = () => {
  emits("reset");
};
</script>
<style lang="scss">
.top-bar {
  width: 100%;
  padding: 12px 16px;
  border-bottom: 1px solid #e5e7eb;
  overflow-x: auto;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  box-sizing: border-box;
  //   overflow-y: hidden;
  flex-shrink: 0;
  .percentage {
    margin: 0 8px;
  }
}
</style>
